<template>
  <div class="play-full-footer">
    <!-- 用户喜欢 -->
    <div class="Song-like" v-show="!isShowLyric">
      <ul>
        <li><i class="iconfont icon-aixin1"></i></li>
        <li><i class="iconfont icon-xiazai"></i></li>
        <li><i class="iconfont icon-changpian"></i></li>
        <li><i class="iconfont icon-pinglun1"></i></li>
        <li><i class="iconfont icon-gengduo"></i></li>
      </ul>
    </div>
    <!-- 进度条 -->
    <div class="Song-progress-bar">
      <div class="currentTime">{{currentTime | nowTime}}</div>
      <div class="progress-bar">
        <input
          type="range"
          min="0"
          :max="duration"
          step="0.1"
          @input="getValue"
          :value="currentTime"
        />
        <span :style="{width:currentTime/duration*100+'%'}"></span>
      </div>
      <div class="totalTime">{{duration | nowTime}}</div>
    </div>
    <!-- 音乐控制 -->
    <div class="Song-control">
      <ul>
        <li>
          <i class="iconfont icon-renwu_xh" 
          @click="songModetoggle"
           v-if="currentMode=='order'"
          ></i>
          <i class="iconfont icon-danquxunhuan" 
          @click="songModetoggle"
          v-if="currentMode=='single'"
          ></i>
          <i class="iconfont icon-bofangye-caozuolan-suijibofang" 
          @click="songModetoggle"
           v-if="currentMode=='random'"
          ></i>
        </li>
        <li @click="$emit('next-music','prev')"><i class="iconfont icon-shangyishou"></i></li>
        <li v-if="paused" @click="$emit('play-state')"><i class="iconfont icon-bofang" ></i></li>
        <li v-else @click="$emit('play-state')"><i class="iconfont icon-zanting" ></i></li>
        <li @click="$emit('next-music','next')"><i class="iconfont icon-xiayidan"></i></li>
        <li><i class="iconfont icon-caidan"></i></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["currentTime", "duration",'paused','isShowLyric'],
  data: function () {
    return {
      SongMode:['single','random','order'],
      currentMode:'order',
      currentIndex:2
    };
  },
  created(){
    //获取爷爷组件的播放模式状态
    this.currentMode=this.$root.$children[0].songMode;
  },
  filters:{
    nowTime(val){
      //分钟
      let minutes = parseInt((val/60)) < 10 ? '0' + parseInt((val/60)) : parseInt((val/60));
      //秒数
      let seconds = parseInt((val%60)) < 10 ? '0' + parseInt((val%60)) : parseInt((val%60));
      // 时间补零
      return minutes+":"+seconds;
    }
  },
  methods: {
    getValue: function (e) {
      this.$emit("update:currentTime", e.target.value);
    },
    songModetoggle(){
          this.currentIndex++;
          this.currentIndex=this.currentIndex>2?0:this.currentIndex;
          this.currentMode=this.SongMode[this.currentIndex];
          this.$emit("update:songmode", this.currentMode);
    }
  },
};
</script>

<style scoped lang="less" >
.play-full-footer {
  width: 100vw;
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 20px;
  left: 0;
}
.Song-like,.Song-control {
  ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    li {
      flex: 1;
      text-align: center;
      i.iconfont {
        font-size: 20px;
        color: #ffffff;
      }
      .icon-bofang,.icon-zanting{
        font-size: 35px !important;
      }
    }
  }
}
.Song-progress-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  font-size: 12px;
  margin: 15px 0;
  div:first-child{
    color:white;
    transform: scale(0.85);
  }
  div:last-child{
    color:#a5a2a2;
    transform: scale(0.85);
  }
  .progress-bar {
    flex: 1;
    position: relative;
    height: 3px;
    background: #7A7071;
      margin: 0 8px;
    border-radius: 20px;
    input {
      position: absolute;
      top: 0;
      width: 100%;
      left: 0;
      opacity: 0;
      z-index: 99;
    }
    span{
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 100%;
      background-color: red;
      border-radius: 20px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-left: 5px;
      &:after{
        content: '😐';
        margin-right: -2px;
      }
    }
  }
}
</style>